<template>
  <!-- 折线图2  -->
  <div ref="index" class="index"></div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import { ref, reactive, watch, nextTick } from "vue";
// 接收值
let props = defineProps({
  carData: {
    type: Object,
    default: false,
  },
});

// 定义值
let index = ref(); //ref的应用
// 定义加载函数
let initCharts = () => {
  let chart = echarts.init(index.value);
  let componentsTime = [];
  let oldValue = [];
  let newValue = [];
  for (let i = 0; i < 24; i++) {
    if (i < 10) {
      componentsTime.push(`0${i}:00`);
    } else {
      componentsTime.push(`${i}:00`);
    }
    oldValue.push(Math.floor(Math.random() * (50 - 10 + 1)) + 10);
    newValue.push(Math.floor(Math.random() * (50 - 10 + 1)) + 10);
  }

  let option = {
    backgroundColor: "#031d33",
    legend: {
      show: true,
      x: "right",
      y: "10px",
      itemGap: 16,
      itemWidth: 10,
      itemHeight: 2,
      textStyle: {
        // 图例文字的样式
        fontSize: 12,
      },
      data: [
        {
          name: "历史均值",
          icon: "roundRect",
          textStyle: {
            color: "#687786",
            padding: [3, 0, 0, 3],
          },
        },
        {
          name: "优化后",
          icon: "roundRect",
          textStyle: {
            color: "#34A466",
            padding: [3, 0, 0, 3],
          },
        },
      ],
    },
    grid: {
      top: "25%",
      bottom: "15%",
      left: "13%",
      right: "5%",
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "#0A2945",
      textStyle: {
        color: "#FFF",
      },
      extraCssText: "box-shadow: 1px 1px 5px #fff",
    },
    dataZoom: {
      type: "inside",
      xAxisIndex: [0, 0],
      start: 0,
      end: 100,
    },
    xAxis: {
      type: "category",
      data: componentsTime,
      axisLine: {
        lineStyle: {
          color: "#57617B",
        },
      },
      axisTick: {
        alignWithLabel: true,
      },
      boundaryGap: false,
    },
    yAxis: {
      type: "value",
      splitLine: {
        show: false,
      },
      nameTextStyle: {
        fontFamily: "Microsoft YaHei",
      },
      axisLabel: {
        fontSize: 10,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#57617B",
        },
      },
    },
    series: [
      {
        name: "历史均值",
        type: "line",
        data: oldValue,
        smooth: false,
        symbolSize: 4,
        showSymbol: false,
        symbol: "circle",
        lineStyle: {
          normal: {
            color: "#687786",
          },
        },
        itemStyle: {
          color: "#687786",
          borderColor: "rgba(255,255,255,0.3)",
          borderWidth: 2,
        },
        label: {
          show: false,
        },
        areaStyle: {
          normal: {
            barBorderRadius: 4,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(104,119,134,1)",
              },
              {
                offset: 1,
                color: "rgba(104,119,134,0)",
              },
            ]),
          },
        },
      },
      {
        name: "优化后",
        type: "line",
        data: newValue,
        smooth: false,
        symbolSize: 4,
        showSymbol: false,
        symbol: "circle",
        lineStyle: {
          normal: {
            color: "#34A466",
          },
        },
        itemStyle: {
          color: "#34A466",
          borderColor: "rgba(255,255,255,0.3)",
          borderWidth: 1,
        },
        label: {
          show: false,
        },
        areaStyle: {
          normal: {
            barBorderRadius: 4,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#34A466",
              },
              {
                offset: 1,
                color: "rgba(52, 164, 102, 0)",
              },
            ]),
          },
        },
      },
    ],
  };

  chart.setOption(option, true);
  // 当窗口大小改变时候，echarts重置大小
  window.addEventListener("resize", () => {
    chart.resize();
  });
};

// 监听当配置项发生变化的时候，调用加载函数
watch(
  () => props.carData,
  (val) => {
    if (Object.keys(val)) {
      nextTick(() => {
        initCharts();
      });
    }
  },
  { immediate: true }
);
</script>

<style scoped lang="less">
.index {
  width: 100%;
  height: 200px;
}
</style>
